export class JDHomepage {
  private container: HTMLDivElement;

  constructor() {
    this.container = document.createElement('div');
    this.container.className = 'jd-homepage';
    this.initContent();
  }

  private initContent() {
    this.container.innerHTML = `
      <!-- Header -->
      <header class="jd-header">
        <div class="header-top">
          <div class="container">
            <div class="location">
              <span>📍 北京</span>
            </div>
            <div class="user-menu">
              <a href="#">你好，请登录</a>
              <a href="#">免费注册</a>
              <a href="#">我的订单</a>
              <a href="#">我的京东</a>
              <a href="#">京东会员</a>
              <a href="#">企业采购</a>
              <a href="#">客户服务</a>
            </div>
          </div>
        </div>
        
        <div class="header-main">
          <div class="container">
            <div class="logo">
              <img src="https://via.placeholder.com/200x60/red/white?text=京东" alt="京东">
            </div>
            <div class="search-box">
              <input type="text" placeholder="搜索商品">
              <button class="search-btn">搜索</button>
            </div>
            <div class="cart">
              <span class="cart-icon">🛒</span>
              <span class="cart-text">我的购物车</span>
              <span class="cart-count">0</span>
            </div>
          </div>
        </div>
      </header>

      <!-- Navigation -->
      <nav class="jd-nav">
        <div class="container">
          <div class="nav-categories">
            <span class="nav-item">全部商品分类</span>
            <span class="nav-item">服装城</span>
            <span class="nav-item">美妆馆</span>
            <span class="nav-item">京东超市</span>
            <span class="nav-item">生鲜</span>
            <span class="nav-item">到家</span>
            <span class="nav-item">充值缴费</span>
            <span class="nav-item">9.9元拼</span>
            <span class="nav-item">领券</span>
            <span class="nav-item">领金贴</span>
            <span class="nav-item">plus会员</span>
          </div>
        </div>
      </nav>

      <!-- Main Content -->
      <main class="jd-main">
        <div class="container">
          <div class="main-content">
            <!-- Left Sidebar -->
            <aside class="sidebar">
              <div class="category-menu">
                <div class="category-item">
                  <span>📱 手机数码</span>
                  <span class="arrow">></span>
                </div>
                <div class="category-item">
                  <span>💻 电脑办公</span>
                  <span class="arrow">></span>
                </div>
                <div class="category-item">
                  <span>🏠 家用电器</span>
                  <span class="arrow">></span>
                </div>
                <div class="category-item">
                  <span>👕 服装鞋包</span>
                  <span class="arrow">></span>
                </div>
                <div class="category-item">
                  <span>💄 美妆护肤</span>
                  <span class="arrow">></span>
                </div>
                <div class="category-item">
                  <span>🍎 生鲜食品</span>
                  <span class="arrow">></span>
                </div>
                <div class="category-item">
                  <span>🏠 家居建材</span>
                  <span class="arrow">></span>
                </div>
                <div class="category-item">
                  <span>🚗 汽车用品</span>
                  <span class="arrow">></span>
                </div>
                <div class="category-item">
                  <span>🎮 运动户外</span>
                  <span class="arrow">></span>
                </div>
                <div class="category-item">
                  <span>📚 图书音像</span>
                  <span class="arrow">></span>
                </div>
              </div>
            </aside>

            <!-- Banner Section -->
            <section class="banner-section">
              <div class="main-banner">
                <img src="https://via.placeholder.com/800x400/ff6b6b/white?text=主轮播图" alt="主轮播图">
              </div>
              <div class="banner-side">
                <div class="side-banner">
                  <img src="https://via.placeholder.com/200x200/4ecdc4/white?text=侧边广告1" alt="侧边广告1">
                </div>
                <div class="side-banner">
                  <img src="https://via.placeholder.com/200x200/45b7d1/white?text=侧边广告2" alt="侧边广告2">
                </div>
              </div>
            </section>
          </div>
        </div>
      </main>

      <!-- Featured Products -->
      <section class="featured-products">
        <div class="container">
          <h2 class="section-title">热门商品</h2>
          <div class="product-grid">
            <div class="product-card">
              <div class="product-image">
                <img src="https://via.placeholder.com/200x200/ff6b6b/white?text=商品1" alt="商品1">
              </div>
              <div class="product-info">
                <h3 class="product-title">Apple iPhone 15 Pro</h3>
                <p class="product-desc">钛金属设计，A17 Pro芯片</p>
                <div class="product-price">
                  <span class="current-price">¥7999</span>
                  <span class="original-price">¥8999</span>
                </div>
              </div>
            </div>

            <div class="product-card">
              <div class="product-image">
                <img src="https://via.placeholder.com/200x200/4ecdc4/white?text=商品2" alt="商品2">
              </div>
              <div class="product-info">
                <h3 class="product-title">华为 Mate 60 Pro</h3>
                <p class="product-desc">卫星通讯，昆仑玻璃</p>
                <div class="product-price">
                  <span class="current-price">¥6999</span>
                  <span class="original-price">¥7999</span>
                </div>
              </div>
            </div>

            <div class="product-card">
              <div class="product-image">
                <img src="https://via.placeholder.com/200x200/45b7d1/white?text=商品3" alt="商品3">
              </div>
              <div class="product-info">
                <h3 class="product-title">小米14 Ultra</h3>
                <p class="product-desc">徕卡光学，骁龙8 Gen 3</p>
                <div class="product-price">
                  <span class="current-price">¥5999</span>
                  <span class="original-price">¥6499</span>
                </div>
              </div>
            </div>

            <div class="product-card">
              <div class="product-image">
                <img src="https://via.placeholder.com/200x200/96ceb4/white?text=商品4" alt="商品4">
              </div>
              <div class="product-info">
                <h3 class="product-title">MacBook Pro 14</h3>
                <p class="product-desc">M3芯片，专业级性能</p>
                <div class="product-price">
                  <span class="current-price">¥14999</span>
                  <span class="original-price">¥15999</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Footer -->
      <footer class="jd-footer">
        <div class="container">
          <div class="footer-content">
            <div class="footer-section">
              <h4>购物指南</h4>
              <ul>
                <li><a href="#">购物流程</a></li>
                <li><a href="#">会员介绍</a></li>
                <li><a href="#">常见问题</a></li>
              </ul>
            </div>
            <div class="footer-section">
              <h4>配送方式</h4>
              <ul>
                <li><a href="#">上门自提</a></li>
                <li><a href="#">211限时达</a></li>
                <li><a href="#">配送服务查询</a></li>
              </ul>
            </div>
            <div class="footer-section">
              <h4>支付方式</h4>
              <ul>
                <li><a href="#">货到付款</a></li>
                <li><a href="#">在线支付</a></li>
                <li><a href="#">分期付款</a></li>
              </ul>
            </div>
            <div class="footer-section">
              <h4>售后服务</h4>
              <ul>
                <li><a href="#">售后政策</a></li>
                <li><a href="#">价格保护</a></li>
                <li><a href="#">退款说明</a></li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    `;
  }

  public render(): HTMLElement {
    return this.container;
  }
} 